import React, { useState, useEffect } from "react";
import { Table, Button, Modal, notification } from "antd";
import {
  DeleteOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
  UploadOutlined,
} from "@ant-design/icons";
import { useNavigate } from "react-router";

import axios from "axios";
const { confirm } = Modal;
export default function NewsDraft() {
  const [data, setData] = useState([]);
  const navigator = useNavigate();
  const { username } = JSON.parse(localStorage.getItem("token"));

  // 获取所有权限
  useEffect(() => {
    axios
      .get(`/news?author=${username}&auditState=0&_expand=category`)
      .then((res) => {
        let list = res.data;
        console.log(list);
        list.forEach((item) => {
          if (item.label) {
            item.title = item.label;
          }
        });
        // 把请求回来的数据-->"首页"children属性赋值为空字符串，本身是[]，这样的话渲染UI时，首页也有展开项，赋值为""，只要不是数组就不会有展开项了
        setData(list);
      });
  }, [username]);

  // 表格中上传到审核列表的按钮事件
  const handleUpdate = (id) => {
    axios
      .patch(`/news/${id}`, {
        auditState: 1, //改为1代表当前新闻已经提交到了审核中
      })
      .then(() => {
        // 并跳转到审核列表
        navigator("/audit-manage/list");
        notification.info({
          message: "通知",
          description: "您可以到审核列表中查看您的新闻",
          placement: "bottomRight",
        });
      });
  };
  // 表格头设置
  const columns = [
    {
      title: "ID",
      dataIndex: "id",
      render: (id) => <b>{id}</b>,
    },
    {
      title: "新闻标题",
      dataIndex: "title",
      // 标题，和当前的数据
      render: (title, row) => (
        <a href={`/news-manage/preview/${row.id}`}>{title}</a>
      ),
    },
    {
      title: "作者",
      dataIndex: "author",
    },
    {
      title: "新闻分类",
      dataIndex: "categoryId",
      // render: (category) => category.label
    },
    {
      title: "操作",
      render: (row) => {
        return (
          <div>
            <Button
              danger
              shape="circle"
              icon={<DeleteOutlined />}
              onClick={() => confirmMethod(row)}
            />
            <Button
              shape="circle"
              icon={<EditOutlined />}
              onClick={() => navigator("/news-manage/update/" + row.id)}
            />
            <Button
              type="primary"
              shape="circle"
              icon={<UploadOutlined />}
              onClick={() => handleUpdate(row.id)}
            />
          </div>
        );
      },
    },
  ];

  // 删除事件
  function confirmMethod(row) {
    confirm({
      title: "你确定删除当前项吗？",
      icon: <ExclamationCircleOutlined />,
      onOk() {
        deleteMethod(row);
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  }

  // 删除事件内部的调用的函数
  const deleteMethod = (row) => {
    // 过滤掉删除不要的选项，即当前row
    setData(data.filter((item) => item.id !== row.id));
    axios.delete(`/news/${row.id}`);
  };

  return (
    <Table
      pagination={{ pageSize: 5 }}
      columns={columns}
      dataSource={data}
      rowKey={(item) => item.id}
    />
  );
}
